<template>
    <div class="topic">
        <ul v-for="item in categoryList" :key="item.id">
            <h3>{{item.name}}</h3>
            <li>
                <div  v-for="i in item.goodsList" :key="i.id"  @click="btn(item.id)">
                    <img :src="i.list_pic_url" alt="">
                    <p>{{i.name}}</p>
                    <span>{{i.retail_price|Price}}</span>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'VueTopic',

    data() {
        return {
            
        };
    },
    props:['categoryList'],

    mounted() {
        
    },

    methods: {
        btn(id){
        console.log(id)
        this.$router.push({path:'/detail',query:{id}})
      }
    },
};
</script>

<style lang="less" scoped>
.topic{
    ul{
        h3{
            text-align: center;
            margin: 40px 0;
        }
        li{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            text-align: center;
            div{
                width: 50%;
                text-align: center;
                img{
                    width: 100%;
                }
                p{
                    font-size: 16px;
                    width: 150px;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }
                span{
                    font-size: 13px;
                    color: rgb(170, 23, 23);
                }
            }
        }
    }
}

</style>